<template>
	<main-container>
		<!-- 工具栏 -->
		<div class="hx-table-toolbar">
			<div>
				<el-button type="primary" v-auth="'upms:sysmenu:add'" @click="add">
					<el-icon> <ele-Plus /> </el-icon> 新增
				</el-button>
			</div>
			<right-toolbar :searchBtn="true" :refreshBtn="true" @search="showSearch = !showSearch"
				@refresh="getPage"></right-toolbar>
		</div>
		<el-table :data="menuTableData" v-loading="loading" style="width: 100%" row-key="path" border
			:tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
			<el-table-column label="菜单名称" show-overflow-tooltip>
				<template #default="scope">
					<SvgIcon :name="scope.row.icon" />
					<span class="ml10">{{ $t(scope.row.name) }}</span>
				</template>
			</el-table-column>
			<el-table-column prop="type" label="类型" align="center" width="100">
				<template #default="scope">
					<el-tag :type="scope.row.type == '0' ? 'success' : scope.row.type == '1' ? '' : 'info'" effect="plain">
						{{ scope.row.type == '0' ? '菜单' : scope.row.type == '1' ? '按钮' : '未知' }}
					</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="sort" label="排序" align="center" width="100" />
			<el-table-column prop="permission" label="菜单权限" />
			<el-table-column prop="path" label="菜单编码" />
			<el-table-column prop="component" label="菜单路径"></el-table-column>
			<el-table-column prop="applicationKey" label="应用系统">
				<template #default="scope">
					<el-tag effect="light">
						{{ scope.row.applicationKey }}
						<!-- {{ $dictValue.findByValue(scope.row.applicationKey, applicationKeys) }} -->
					</el-tag>
				</template>
			</el-table-column>
			<el-table-column label="操作" align="center" fixed="right" width="300">
				<template #default="scope">
					<el-button link type="primary" v-auth="'upms:sysmenu:edit'" @click="edit(scope.row)">
						<el-icon> <ele-Edit /> </el-icon>修改
					</el-button>
					<el-button link type="danger" v-auth="'upms:sysmenu:del'" @click="del(scope.row.id)">
						<el-icon> <ele-Delete /> </el-icon>删除
					</el-button>
					<el-button link v-auth="'upms:sysmenu:add'" v-if="scope.row.type == '0'" type="primary"
						@click="addChildrenMenu(scope.row)">
						<el-icon> <ele-Plus /> </el-icon>
						添加下级菜单
					</el-button>
				</template>
			</el-table-column>
		</el-table>
		<Form ref="refForm" @initPage="getPage" />
	</main-container>
</template>

<script lang="ts">
import { defineAsyncComponent, ref, toRefs, reactive, defineComponent } from 'vue';
import { RouteRecordRaw } from 'vue-router';
import { ElMessageBox, ElMessage } from 'element-plus';
import { getList, delObj } from '/@/api/upms/menu';
import { getList as getDictValueList } from '/@/api/upms/dictvalue.js';
export default defineComponent({
	name: 'systemMenu',
	components: {
		Form: defineAsyncComponent(() => import('/@/views/upms/menu//form.vue')),
	},
	setup() {
		const refForm = ref();
		const state = reactive({
			loading: false,
			applicationKeys: [],
		});
		const showSearch = ref(false);
		const menuTableData = ref([]);
		/**
		 * 菜单列表查询
		 */
		const getPage = async () => {
			state.loading = true;
			await getList()
				.then((response: any) => {
					menuTableData.value = response.data.data;
					state.loading = false;
				})
				.catch(() => {
					state.loading = false;
				});
		};
		/**
		 * 添加下级菜单
		 */
		const addChildrenMenu = (row: any) => {
			refForm.value.applicationKeys = state.applicationKeys;
			refForm.value.form.parentId = row.id;
			refForm.value.initForm();
		};
		/**
		 * 修改点击事件
		 */
		const edit = (row: RouteRecordRaw) => {
			refForm.value.applicationKeys = state.applicationKeys;
			refForm.value.initForm(row);
		};

		/**
		 * 新增点击事件
		 */
		const add = () => {
			refForm.value.applicationKeys = state.applicationKeys;
			refForm.value.initForm();
		};

		// 删除当前行
		const del = (id: string) => {
			ElMessageBox.confirm(`此操作将永久删除该菜单, 是否继续?`, '提示', {
				confirmButtonText: '删除',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(() => {
					delObj(id)
						.then((response: any) => {
							ElMessage.success('删除成功');
							getPage();
						})
						.catch(() => { });
				})
				.catch(() => { });
		};
		const getDictList = () => {
			getDictValueList('application_key').then((response: any) => {
				state.applicationKeys = response.data.data;
			});
		};
		getDictList();
		getPage();
		return {
			refForm,
			showSearch,
			menuTableData,
			edit,
			add,
			del,
			getPage,
			addChildrenMenu,
			...toRefs(state),
		};
	},
});
</script>
